<html>
	<head>
		<title>Demo page for routemap-co2</title>
		<LINK REL="Routemap Stylesheet" HREF="demo.css" TYPE="text/css" TITLE="Default styling for the route map" MEDIA="screen, print">
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load("maps", "3", {other_params: "sensor=false"});
			// Load jQuery second so that we get to use the $ syntax.
			google.load("jquery", "1");
			google.load("jqueryui", "1");
		</script>
		<script type="text/javascript" src="routemap-co2.js"></script>
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<h1>Carbon Calc Test Harness</h1>

		<h2>1. (optional) Load in some KML data</h2>
		<div class="borderdiv">
			<span>Either put a URL to your KML from e.g. Google Maps (requires PHP), or the actual KML data pasted into this area and click 'Load Data'</span>
			<textarea id="datalocation" cols="60">testdata.kml</textarea>
			<input type="button" id="setdatalocation" value="Load Data" />
		</div>

		<h2>2. Inspect your route</h2>
		<div id="mapframe" class="co2map" style="width:800px;"></div>

		<script type="text/javascript">
			// Wait for the DOM to be ready using the $(document).ready syntax.
			var routemap = null;
			jQuery(document).ready(function ()
			{
				routemap = new RoutemapCO2(document.getElementById("mapframe"));
			});
			
			// Bind a function to allow the data to be changed on the fly.
			function ChangeMapAddress()
			{
				var routefile = $("#datalocation").val();
				var routefiletype = EnumRouteDataType.KML;
				routemap.LoadData(routefile, routefiletype);
			}
			$("#setdatalocation").click(ChangeMapAddress);

			/*
			 * Other functions related to the display of the page...
			 */
			function ExpandTextArea()
			{
				var lines = 0;
				var datalocation = document.getElementById("datalocation");
			
				$($(datalocation).val().split("\n")).each(function(i, s){
				  lines += (s.length/(datalocation.offsetWidth/10)) + 1;
				});
				datalocation.style.height = Math.floor(lines + 2) + 'em';
			}
			$("textarea").change(ExpandTextArea);
			$("textarea").keyup(ExpandTextArea);
		</script>
	</body>
</html>
